<template>
  <div class="login-account">
    <el-radio-group v-model="role" class="mb-10">
      <el-radio-button label="医生登录"></el-radio-button>
      <el-radio-button label="健康管理师登录"></el-radio-button>
    </el-radio-group>
    <el-form label-width="80px" :rules="rules" :model="account" ref="formRef">
      <el-form-item label="手机号" prop="phone" class="bb">
        <el-input v-model="account.phone" />
      </el-form-item>
      <el-form-item label="密码" prop="password" class="bb">
        <el-input v-model="account.password" show-password />
      </el-form-item>
      <!-- <el-form-item label="验证码" prop="code" class="bb">
        <el-input v-model="account.code">
          <template #append>
            <img src="@/assets/img/icon/code.png" alt="" />
          </template>
        </el-input>
      </el-form-item> -->
      <div class="footer-tools">
        <el-checkbox v-model="isKeepPassword">记住密码</el-checkbox>
        <p class="forget cp" @click="changeTab(false)">忘记密码?</p>
      </div>
      <el-button type="primary" class="login-btn" @click="handleLoginClick"
        >登录</el-button
      >

      <!-- <p class="register">
        暂无账号，
        <router-link :to="{ name: 'register' }">
          <span class="cp" style="color: #5198fe; text-decoration: underline"
            >去注册</span
          >
        </router-link>
      </p> -->
    </el-form>
  </div>
</template>

<script lang="ts">
// 框架相关
import { defineComponent, ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElForm } from 'element-plus'
// utils
import localCache from '@/utils/cache'
// page config
import { rules } from '../config/account-config'
// api
import { Login } from '@/service/api/login'
import { DoctorInfo } from '@/service/api/doctor'

export default defineComponent({
  name: 'loginAccount',
  props: {
    i: {
      type: String
    },
    modelValue: {
      type: Boolean,
      default: true
    }
  },
  components: {},
  emits: ['update:modelValue'],

  setup(props, { emit }) {
    const store = useStore()
    const router = useRouter()
    // 定义属性
    let role = ref('医生登录')
    let isKeepPassword = ref(props.modelValue)
    const formRef = ref<InstanceType<typeof ElForm>>()
    const account = reactive({
      phone: localCache.getCache('phone') ?? '',
      password: localCache.getCache('password') ?? ''
    })
    const changeTab = (flag: boolean) => {
      emit('update:modelValue', flag)
    }
    /**
     * handleLoginClick登录逻辑
     */
    const handleLoginClick = () => {
      formRef.value?.validate(async (valid) => {
        if (valid) {
          if (isKeepPassword.value) {
            // 本地缓存
            localCache.setCache('phone', account.phone)
            localCache.setCache('password', account.password)
          } else {
            localCache.deleteCache('phone')
            localCache.deleteCache('password')
          }
          // 登录验证
          let url = ''
          if (role.value == '医生登录') {
            url = '1'
          } else {
            url = '2'
          }
          let { data } = await Login(url, { ...account })
          let token = data.user_token
          store.commit('user/initServerToken', token)
          let userRes = await DoctorInfo()
          let userInfo = userRes.data
          store.commit('user/initInfo', userInfo)
          const redirect = localStorage.getItem('redirect')
          if (userInfo.doctor_name) {
            if (redirect) {
              window.location.href = '/demo_doctor/#' + redirect
            } else {
              router.replace({
                name: 'index',
                params: { i: props.i }
              })
            }
            localStorage.removeItem('redirect')
          } else {
            // if (redirect.includes('qr_code')) {
            //   window.location.href = '/demo_doctor/#' + redirect
            // } else {
            //   this.$router.replace({
            //     name: 'editInfo',
            //     params: { i: this.i }
            //   })
            // }
            localStorage.removeItem('redirect')
          }
        }
      })
    }
    return {
      formRef,
      role,
      rules,
      account,
      isKeepPassword,
      changeTab,
      handleLoginClick
    }
  }
})
</script>
<style lang="less" scoped>
.login-account {
  width: 518px;
  margin: 0 auto;
  .bb {
    border-bottom: 2px solid #a2c9f9;
  }
  img {
    width: 143px;
    height: 40px;
  }
  .forget {
    text-align: right;
    color: #5198fe;
  }
  .login-btn {
    width: 70%;
    margin-top: 40px;
  }
  .footer-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .register {
    margin-top: 20px;
  }
}
:deep(.el-input__inner) {
  border: none;
  background-color: #fafcff;
}
:deep(.el-input-group__append) {
  padding: 0;
  background-color: #fafcff;
  border: none;
}
:deep(.el-form-item__label) {
  text-align: left;
}
</style>
